<div id="main">
 <form class="query-box" onsubmit="return submitChange();">
 <input class="query-input" id="source" type="text"
 autocomplete="off" value="hello world"/>
 <select name="src" id="src"></select>
 >>
 <select name="dst" id="dst"></select>
 <input class="button" type="submit" value="Translate"/>
 </form>
</div>
<div id="results">
 <div id="results_title">Translation:</div>
 <hr/>
 <div id="results_body"></div>
</div>
 <script type="text/javascript">
 google.load("language", "1");
 google.setOnLoadCallback(init);
 function init() {
 var src = document.getElementById('src');
 var dst = document.getElementById('dst');
 var i=0;
 for (l in google.language.Languages) {
 var lng = l.toLowerCase();
 var lngCode = google.language.Languages[l];
 if (google.language.isTranslatable(lngCode)) {
 src.options.add(new Option(lng, lngCode));
 dst.options.add(new Option(lng, lngCode));
 }
 }
 submitChange();
 }
 function submitChange() {
 var value = document.getElementById('source').value;
 var src = document.getElementById('src').value;
 var dest = document.getElementById('dst').value;
 google.language.translate(value, src, dest, translateResult);
 return false;
 }
 function translateResult(result) {
 var resultBody = document.getElementById("results_body");
 if (result.translation) {
 resultBody.innerHTML = result.translation;
 } else {
 resultBody.innerHTML = '<span style="color:red">Error Translating</span>';
 }
 }
 </script>
